<template>
    <div>
    <el-descriptions 
        title="个人信息" 
        :column="2" 
        size="large"
        border>
    <el-descriptions-item label="员工名称">{{ userInfo.name }}</el-descriptions-item>
    <el-descriptions-item label="手机号">{{ userInfo.phone }}</el-descriptions-item>
    <el-descriptions-item label="职位">
      <el-tag size="small" :type="userInfo.role == '老板' ? 'danger': userInfo.role == '管理员' ?'warning' :''">{{ userInfo.role}}</el-tag>
    </el-descriptions-item>
    <el-descriptions-item label="性别">
      <el-tag size="small" :type="userInfo.sex == 'woman' ? 'danger':'warning'">{{ userInfo.sex == 'woman' ? '女':'男'  }}</el-tag>
    </el-descriptions-item>
    <el-descriptions-item label="年龄"
      >{{ userInfo.age }}</el-descriptions-item
    >
    <el-descriptions-item label="工号"
      >{{ userInfo.workNumber }}</el-descriptions-item
    >
    <el-descriptions-item label="居住地址"
      >{{ userInfo.address }}</el-descriptions-item
    >
  </el-descriptions>
    </div>
</template>

<script setup>
import { defineProps } from 'vue';
const props = defineProps({
    userInfo:{
        type:Object,
        required:true
    }
})
</script>

<style lang="scss" scoped>

</style>